<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        #result{
            color: gray;
            float: right;
        }
        .showCount{
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
        .form-control {
            width: 265px;
            display: inline-block;
            height: 40px;
        }
        .sm {
            width: 65px;
        }
        .mid {
            width: 95px;
        }
        #docAdd h4 {
            text-align: center;
        }

        #memo {
            width: 400px;
            margin-left:30px;
        }

        .lh-1 tr {
            height: 40px;
        }
       #result{
           text-align: right;
       }
        .table td{
            vertical-align: middle;
        }
        .showCount{
            color:red;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>
    <form id="queryForm">
        籍贯：<input name="grand" id="grand" class="form-control">
        朝代：<input name="dynName" id="dynName" class="form-control">
        姓、名、字：<input name="docName" id="docName1" class="form-control">
        <input type="button" id="btnQuery" class="btn btn-primary" value="查询">
    </form>
    <div id="result">本次查询共<span class="showCount" id="pageCount"></span>页，
        <span class="showCount" id="listCount"></span>条记录
    </div>
</div>
<table class="table table-hover" >
    <tr class="table-active" align="center">
        <td>编号</td><td>朝代</td><td>省份</td><td>城市</td><td>县</td><td>姓名</td>
        <td>生卒年</td><td width="450px">备注</td><td>操作</td>
    </tr>
    <tbody id="tbdoc"></tbody>
</table>
<nav aria-label="Page navigation example">
    <ul class="pagination"></ul>
</nav>
<!--js代码-->
<script>
    $(function() {
        $("#btnAdd").on("click", function() {
            addDoctor();
        })
        findProvince();
        findDynasty();
        $("#pid").on("change", function() {
            findCity(this.value);
        })

        $("#cid").on("change", function() {
            findCounty(this.value);
        })
        $("#allName").on("change", function() {
            addName();
        })
        $("#btnQuery").on("click",function () {
            findDoctor(1,8);
        })
    })

    function addName() {
        let allname = $("#allName").val();
        let len = allname.length;
        let name;
        if(len==4){
            surname=allname.substr(0,2);
            name=allname.substr(2);
        }
        if(len==2||len==3){
            surname=allname.substr(0,1);
            name=allname.substr(1)
        }
        $("#docSurName").val(surname);
        $("#docName").val(name);
    }

    function findProvince() {
        $.get(
            "/prov/findProvince",
            function(plist) {
                addSelect("pid", plist, 'pid', 'provName');
            }, 'json'
        )
    }

    function findCity(pid) {
        $.ajax({
                url: "/city/findCity",
                data: {
                    pid: pid
                },
                async:false,
                success:function(clist) {
                    addSelect('cid', clist, 'cid', 'city');
                },
                dataType:'json'
            }
        );
    }

    function findCounty(cid) {
        $.ajax(
            {
                url:"/county/findCounty",
                data:{
                    cityId: cid
                },
                async:false,
                success:function (clist) {
                    addSelect('fk_couId', clist, 'couId', 'county');
                },
                dataType:'json'
            }
        );
    }

    function findDynasty() {
        $.get(
            "/dynasty/findAllDynasty",
            function(dlist) {
                addSelect("dynId", dlist, 'dynId', 'dynName')
            },
            'json'
        );
    }

    function findDoctor(page,size) {
        $.get(
            '/doctor/findDoctor',
            $("#queryForm").serialize()+"&page="+page+"&size="+size,
            function (pageInfo) {
                let tb=$("#tbdoc");
                tb.empty();
                let dlist=pageInfo.list;
                for(let i in dlist){
                    let tr=`<tr>
                                   <td>${dlist[i].docId} </td>
                                   <td>${dlist[i].dynName} </td>
                                   <td>${dlist[i].provName} </td>
                                   <td>${dlist[i].city} </td>
                                   <td>${dlist[i].county} </td>
                                   <td>${dlist[i].dname}</td>
                                   <td>${dlist[i].begin_end} </td>
                                   <td>${dlist[i].memo} </td>
                                    <td><button type="button" onclick="findDoctorById(${dlist[i].docId})"
                                    class="btn btn-primary" data-toggle="modal" data-target="#docModal">修改</button>
                                    </td>
                                </tr>`;
                    tb.append(tr);
                }
                let liFirst=pageInfo.isFirstPage?"":`<li class="page-item"><a class="page-link" href="javascript:findDoctor(${page-1},${size})">上一页</a></li>`;

                let li="";
                for(let i in pageInfo.navigatepageNums) {
                    let pn=pageInfo.navigatepageNums[i];
                    li += `<li class="page-item"><a class="page-link" href="javascript:findDoctor(${pn},${size})">${pn}</a></li>`
                }
                let liLast=pageInfo.isLastPage?"":`<li class="page-item"><a class="page-link" href="javascript:findDoctor(${page+1},${size})">下一页</a></li>`;
                $(".pagination").empty();
                $(".pagination").append(liFirst+li+liLast);
                $("#pageCount").html(pageInfo.pages);
                $("#listCount").html(pageInfo.total);
            },'json'
        );
    }


    function findDoctorById(mid){
        $.get(
            '/doctor/findDoctorById',
            {docId:mid},
            function (doc) {
                addFormData("docUpdateForm",doc);
                findCity($('#pid').val());
                $("#cid").val(doc.cid);
                findCounty($('#cid').val());
                $("#fk_couId").val(doc.fk_couId);
            },'json'
        );
    }

    function updateDoctor(){
        $.post(
            '/doctor/updateDoctor',
            $("#docUpdateForm").serialize(),
            function(num){
                findDoctor(1,8);
                $("#docUpdateForm")[0].reset();
            },
            'json'
        );
    }
</script>
<!-- Modal -->
<div class="modal fade" id="docModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改医家</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="docUpdateForm">
                    <input type="hidden" name="docId">
                    <table class="lh-1" >
                        <tr>
                            <td>省：</td>
                            <td><select id="pid" name="pid" class="form-control"></select></td>
                            <td rowspan="7">
                                <h5 align='center'>备注</h5>
                                <textarea name="memo" id="memo" rows="10" class="form-control"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>市：</td>
                            <td><select id="cid" name="cid" class="form-control"></select></td>
                        </tr>
                        <tr>
                            <td>县：</td>
                            <td><select id="fk_couId" name="fk_couId" class="form-control"></select></td>
                        </tr>
                        <tr>
                            <td>朝代：</td>
                            <td><select id="dynId" name="fk_dynId" class="form-control"></select></td>
                        </tr>
                        <tr>
                            <td>姓名：</td>
                            <td><input name="allName" id="allName" class="form-control"></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                姓：<input id="docSurName" name="docSurname" class="form-control sm">
                                &nbsp;名：<input id="docName" name="docName" class="form-control sm">
                                &nbsp;字：<input id="docWord" name="docWord" class="form-control sm">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                生年：&nbsp;<input type="number" name="beginYear" id="beginYear" class="form-control mid">
                                &nbsp;&nbsp;&nbsp;卒年：<input type="number" name="endYear" id="endYear" class="form-control mid"></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="updateDoctor()" class="btn btn-primary" data-dismiss="modal">修改医家</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>